Enhance Customizer Accessibility with Keyboard Navigation and ARIA Support#8259
Conversation
|
@nishtha-agarwal-211 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
This pull request significantly enhances the accessibility of the customizer controls, aligning with WCAG 2.1 AA standards. It introduces ARIA roles and keyboard navigation, which are crucial for users relying on assistive technologies. Additionally, the inclusion of live region announcements will improve the experience for screen reader users. This aligns with our previous decisions to enhance testing and responsiveness in components, as seen in the recent updates to the ControlsPanel and ThemeSelector components. Thank you for your contributions, and I look forward to your continued work on improving our accessibility standards! |
retenta-bot
Bot
changed the title
github-actions
Bot
added
the
status:blocked
…ustomizer controls (JhaSourav07#8244)
1013e9f to
72a76f6
Compare
github-actions
Bot
removed
the
status:blocked
📦 Next.js Bundle Size Report (Gzipped Sizes)
📊 Summary of Totals
|
Aamod007
added
level:advanced
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
This is a fantastic accessibility improvement! Adding proper ARIA support, tab navigation, and focus rings ensures that the Customizer and Color Picker are usable for everyone, regardless of how they navigate the web. The test updates properly reflect these semantic role changes.
Everything looks excellent, great work!
Label Justification:
- \level:advanced: Assigned based on 3 files changed to add keyboard navigation and ARIA attributes across complex UI components.
- \quality:clean: Excellent semantic markup and robust test updates.
- \ ype:accessibility: Specifically improves screen reader and keyboard interaction support.
- \mentor:Aamod007: Assigned as required.
JhaSourav07
added
the
gssoc:approved
|
🎉 Congratulations @nishtha-agarwal-211! Your PR has been successfully merged. 🚀 Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.
Keep building! 💻✨ |
Description
Enhances customizer controls (
app/customize/andcomponents/) with WCAG 2.1 AA compliant accessibility and keyboard navigation:role="radiogroup"andaria-label="Theme presets"to theme preset containers, androle="radio",aria-checked,aria-pressed, andtabIndex={0}attributes to theme tile buttons.ArrowRight,ArrowLeft,ArrowUp,ArrowDown,Home, andEndkeys to cycle through available themes and update focus.aria-live="polite"status region (role="status") announcing applied theme preset changes to screen readers.focus-visible:ring-2focus rings across interactive theme buttons, selects, inputs, and color pickers.npm run typecheckclean).Fixes #8244
Pillar
Visual Preview
Keyboard focus rings and screen reader live announcements enabled on
/customizetheme preset tiles and color picker controls.Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.